In 1824 the Gobelins tapestry works in Paris had a complaint on its hands: the black wool looked weak, almost reddish. The chemist put in charge of its dyes, Michel-Eugène Chevreul, tested them and found the black was fine. The trouble was the deep blue and violet threads woven beside it. The black only looked wrong because of its neighbors.
Chevreul spent years on that puzzle, and in 1839 he published a book on what he called the simultaneous contrast of colors. Its lesson is the big idea of this piece: a color is never seen alone. Once you get that, you can use color on purpose instead of by luck: on a canvas, a slide, a living-room wall or a phone screen.
Your retina has three kinds of cone cells, tuned to short, medium and long wavelengths of light. Their sensitivities overlap a lot, and your brain works out color by comparing how strongly each kind responds. That is why three numbers are enough to describe any color you can see. Artists usually name them like this:
| Dial | What it means | Everyday words |
|---|---|---|
| Hue | Where it sits around the wheel | red, orange, teal |
| Saturation (or chroma) | How pure or how grayed-down it is | vivid vs. muted, dusty |
| Value (or lightness) | How light or dark it is | pale, deep, navy |
Most beginners think about hue. Most professionals think about value first. Hold that thought; the third demo below is about it.
There are two ways to mix color, and they behave in opposite directions. A screen makes color with light: red, green and blue light added together build toward white. Paint and ink work by absorbing light, so every pigment you add takes something away, and mixtures slide toward a muddy dark. Your printer uses cyan, magenta and yellow (plus black) for exactly this reason.
Screens add light (left); printers and painters subtract it (right). The same "mix two colors" instruction gives opposite results.
In his Opticks of 1704, Isaac Newton took the band of colors from a prism and bent it into a circle, joining red to violet. Every color wheel since is a descendant of that move. Colors directly across the wheel are called complements. Put them side by side and each makes the other look more intense.
Vincent van Gogh used that on purpose. Of his Night Café (1888), with its blood-red walls and green ceiling and billiard table, he wrote to his brother Theo that he had tried "to express the terrible passions of humanity by means of red and green."
Pick a starting hue, then a harmony. The wheel marks which colors belong together under each classic scheme.
Complementary: straight across the wheel. Analogous: next-door neighbors. Triadic: three colors evenly spaced. Split-complement: one color plus the two neighbors of its opposite.
An honest complication: there is more than one wheel. The painter's traditional red-yellow-blue wheel puts green opposite red. The screen wheel above, built from red, green and blue light, puts cyan opposite red. Neither is "the true one." They are maps for different materials, and the demo uses the screen version because you are reading on a screen.
Color harmonies are not laws. They are reliable starting points, the way a chord is a starting point for a song.
Here is Chevreul's discovery in action. A color drifts away from its neighbor: next to yellow, a gray leans bluish; next to blue, the same gray leans yellowish. Next to black it looks pale; next to white it looks dark. The painter and teacher Josef Albers built a whole course on this, published as Interaction of Color in 1963, and he called color "the most relative medium in art."
Both small squares are exactly the same gray. Change the surroundings, then join the squares and watch the difference evaporate.
Strip the color out of a photo and it usually still reads perfectly well. That's because your visual system finds edges, faces and depth mostly from light-and-dark contrast. Two colors can be wildly different in hue and nearly identical in value, and then the boundary between them shimmers and goes soft. Designers call it vibration; readers call it a headache.
This is also why accessibility rules for text measure value, not hue. The Web Content Accessibility Guidelines ask for a contrast ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text, on a scale that runs from 1:1 (identical) to 21:1 (black on white).
Set a text color and a background. The ratio is the standard accessibility formula. Switch on grayscale to see what your eye's edge-detector sees.
Pure red (#ff0000) on a mid green (#009400) has a contrast ratio of 1.00 to 1: in grayscale both become the same gray. Navy (#001166) on cream (#fff5d6) is about 15 to 1.
Reds, oranges and yellows tend to read as warm and near; blues and greens as cool and far. Landscape painters lean on that: distant hills go bluer and paler, a trick covered in this library's piece on perspective. What colors mean, though (mourning, luck, danger, purity) is learned, and it changes from culture to culture and century to century. Treat any chart that says "blue means trust" as marketing folklore, not science.
1. You mix red and green light on a screen. What do you get?
Answer: yellow. Light adds, so red plus green light makes yellow. Mix red and green paint and you get a brownish dark, because pigments subtract.
2. A gray square looks bluish on a yellow wall. What is happening?
Answer: simultaneous contrast. Your brain exaggerates differences at boundaries, pushing the gray toward yellow's opposite. Chevreul described it in 1839.
3. Pure red text on a mid green background is hard to read. Why?
Answer: equal value. Complements can work together beautifully if one is lighter than the other. With no value contrast, the edge vibrates and the letters blur.
Every color has three dials: hue, saturation and value. Light mixes toward white and paint toward dark. Complements intensify each other, neighbors shift each other, and value, not hue, carries most of what the eye needs to read an image. Use the wheel to choose, then check the values.
Try this: take a photo of a room, outfit or slide you've designed and set it to black and white. If the important thing doesn't stand out in gray, it doesn't really stand out in color either. Adjust the light-dark contrast first.